<template> 
    <view>
      <view class="main">
        <div class="mainBox">
          <span>模板预计用时：</span>
          <span v-if="workDay">{{ workDay }}天</span>
          <span v-if="workHour">{{ workHour }}小时</span>
          <span v-if="workMin">{{ workMin }}分</span>
        </div>
        <view class="card">
          <view class="sticky" id="sticky" :style="{
            top: mheight + 'px',
            position: fixedStatus ? 'fixed' : 'static',
          }">
            <tabBar :typeMap="typeMap" :list="loacls" :actIndex="tabIdx" @change="changeTab"></tabBar>
          </view>
          <view class="temp-list" v-for="item in templateList" :key="item.templateId">
            <view class="temp-list-name">{{ item.templateName }}</view>
            <templateTrees :disabled="true" :planId="templateId" @preViewVideo="preViewVideo" :isPlanStatus="true"
              :status="2" @addrecord="addrecordFuc" :tree="item.templateTypeVOS"></templateTrees>
          </view>
        </view>
        <!-- 底部占位 -->
        <view class="footer-block"></view>
        <!-- 底部占位end -->
      </view>
      <recordDialog ref="recordDialog" :show="showRecordEdit" @closed="showRecordEdit = false"></recordDialog>
      <videoDialog ref="videoDialog" @closed="hideVideo" v-if="showVideo" :video="preVideo"></videoDialog>
      <previewMedia ref="previewMedia"></previewMedia>
    </view> 
</template>

<script>
import tabBar from './components/tabBar.vue';
import videoDialog from './components/videoDialog.vue';
import recordDialog from './components/recordDialog.vue';
import {
	getWorkOredrDetailPreview,
	getLoaclTypesPreview,
} from '@/apis/workOrder.js';
import templateTrees from './components/templateTree/templateTree.vue';
import { mapState } from 'vuex';
export default {
	components: {
		tabBar,
		recordDialog,
		templateTrees,
		videoDialog
	},
	data() {
		return {
			mheight: 0,
			fixedStatus: false,
			loacls: [],
			tabIdx: 0,
			typeMap: {},
			templateList: [],
			templateId: '',
			eleInfo: {},
			stickyTop: 0,
			stickyHeight: 0,
			editIdx: -1,
			showRecordEdit: false,
			preVideo: '',
			showVideo: false,
			workDay: '',
			workHour: '',
			workMin: '',
		};
	},

	computed: {
		...mapState('user', ['userinfo']),
		planInfo() {
			return {
				buildingId: this.eleInfo.buildingId,
				buildingName: this.eleInfo.buildingName,
				elevatorId: this.eleInfo.id,
				elevatorAddress: this.eleInfo.elevatorAddress,
				planId: this.planId,
				planWorkItemId: '',
				partsId: '',
			};
		},
	},
	// 监听页面滚动
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
		if (this.offline) {
			return;
		}
		if (e.scrollTop > 20) {
			this.showNav = true;
			this.title = this.eleInfo.elevatorAddress;
			this.scrollTop = e.scrollTop;
		} else {
			this.showNav = false;
			this.title = '保养详情';
		}

		// 任务类别吸顶逻辑
		if (e.scrollTop > this.stickyTop - this.mheight) {
			if (
				this.signTop &&
        e.scrollTop > this.signTop - this.stickyTop + this.mheight + 80
			) {
				this.fixedStatus = false;
			} else {
				this.fixedStatus = true;
			}
		} else {
			this.fixedStatus = false;
		}
	},

	async onLoad(res) {
		this.title = '保养详情';
		// 二维码
		this.templateId = res.scene; 
		// "1566982680079826946"
		// res.planId;
		uni.showLoading({
			title: '加载中',
			mask: true,
		});

		if (this.userinfo.offline) {
			uni.hideLoading();
			return;
		}
		this.loadData();
	},
	onUnload() {
		uni.$off('preViewVideo');
		uni.$off('addrecord');
		if (this.offTimer) {
			clearInterval(this.offTimer);
			this.offTimer = null;
		}
	},
	onHide() {
		if (this.offTimer) {
			clearInterval(this.offTimer);
			this.offTimer = null;
		}
	},
	async onShow() {
		uni.showLoading();
		this.initData();
	},
	mounted() {

	},
	methods: {
		// ...mapActions("user", ["handleRreshToken"]),
		async loadData() {
			this.fixedStatus = false;
			wx.pageScrollTo({
				scrollTop: 0,
				duration: 0,
			});
			this.fixedStatus = false;
			this.initData();
			// 监听工作项点击添加或编辑记录
			uni.$off('addrecord');
			uni.$on('addrecord', (data) => {
				this.addrecordFuc(data);
			});
			// 监听工作项点击查看作业指引
			uni.$off('preViewVideo');
			uni.$on('preViewVideo', (data) => {
				this.preViewVideo(data);
			});
		},
		// 获取吸顶高度
		setSignStyle() {
			let que = wx.createSelectorQuery();
			que
				.select('#signBlock')
				.boundingClientRect((res) => {
					console.log('signBlock', res);
					if (res && res.top) {
						this.signTop = this.scrollTop + res.top;
					}

					que = null;
				})
				.exec();
		},
		// 获取吸顶高度
		setStickyStyle() {
			if (this.stickyTop == 0) {
				let que = wx.createSelectorQuery();
				que
					.select('#sticky')
					.boundingClientRect((res) => {
						console.log('sticky', res);
						this.stickyTop = this.scrollTop + res.top - res.height;
						this.stickyHeight = res.height;
						que = null;
					})
					.exec();
			}
		},
		setHeight(n) {
			this.mheight = n;
		},
		addrecordFuc(form) {
			this.showRecordEdit = true;
			this.$refs['recordDialog'].initData(form);
		},
		hideVideo() {
			this.showVideo = false;
			this.$forceUpdate();
		},
		preViewVideo(url) {
			this.preVideo = url;

			this.showVideo = true;
		},
		async initData() {
			let loacls = await this.getLocals();
			if (!loacls || loacls.length == 0) {
				// console.log(locals, 'locals');
				uni.hideLoading();
				uni.showModal({
					title: '提示',
					content: '此模板暂无数据，请重新选择',
					success() {
						uni.navigateBack({});
					},
					showCancel: false,
				});
				return;
			}
			await this.getWorkOredrDetail();
			this.$nextTick(() => {
				this.setSignStyle();
			});
		},
		async changeTab(idx) {
			if (this.editIdx != -1) {
				uni.showToast({
					title: '您还有信息未保存，请保存',
					icon: 'none',
					mask: true,
				});
				return;
			}
			// this.templateList =[]
			this.tabIdx = idx;
			await this.getWorkOredrDetail();

			wx.pageScrollTo({
				scrollTop: Math.max(this.stickyTop - this.mheight - 50, 0),
			});
			setTimeout(() => {
				this.setSignStyle();
			}, 1000);

			return;
		},
		// 获取详情列表
		getWorkOredrDetail() {
			return new Promise((resolve) => {
				// ,tltId:'1000000000000000100'
				getWorkOredrDetailPreview({
					templateId: this.templateId,
					tltId: this.loacls[this.tabIdx].tltId || '',
				})
					.then((res) => {
						this.workDay = res.data[0].workDay;
						this.workHour = res.data[0].workHour;
						this.workMin = res.data[0].workMin;
						// this.templateList = res.data;
						// this.$forceUpdate();
						this.$set(this, 'templateList', res.data);
						this.$nextTick(() => {
							uni.hideLoading();
						});
						resolve(res.data);
					})
					.catch(() => {
						uni.hideLoading();
					});
			});
		},
		// 获取位置列表
		getLocals() {
			return new Promise((resolve) => {
				getLoaclTypesPreview({ templateId: this.templateId }).then((res) => {
					let arr = res.data || [];
					let num = 0;
					for (let i = 0; i < arr.length; i++) {
						num = num + arr[i].workItemCount;
					}
					arr.unshift({ tltName: '全部', workItemCount: num });
					this.loacls = arr;
					resolve(res.data);
				});
			});
		},
		handleBack() {
			uni.navigateBack({});
		},
		backToList() {
			uni.navigateBack({});
		},
	},
};
</script>
<style>
page {
  width: 100%;
  background-color: #f3f6f8;
}
</style>
<style lang="scss" scoped>
.main {
  background-color: #f3f6f8;
  .mainBox{
    padding:20rpx 20rpx 0rpx 20rpx;
    font-size: 14px;
    color: #666666;
  }
}

.nabvar {
  position: fixed;
  top: 0;
  z-index: 100;
}

.signCircle {
  height: 80rpx;
  width: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0091ff;
  color: #fff;
  position: fixed;
  z-index: 200;
  border-radius: 50%;
}

.add {
  background: #0091ff;
  color: #fff;
  font-size: 26rpx;
}

.finishDateContent {
  display: flex;
  justify-content: space-between;
  padding-bottom: 24rpx;
  color: #666;
  border-bottom: 2rpx solid #e9e9e9;
  margin-bottom: 22rpx;

  .label {
    font-size: 26rpx;
  }

  .timeArea {
    display: flex;
    align-items: center;
    font-size: 24rpx;

    image {
      width: 32rpx;
      height: 32rpx;
    }
  }
}

.aa {
  position: fixed;
  z-index: 102;
  width: 100%;
  overflow: auto;
  background-color: #fff;
  box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
}

.header {
  background: #f3f6f8;
  // height: 266rpx;

  .bg {
    width: 376rpx;
    height: 366rpx;
    position: absolute;
    top: 0;
    right: 0;
  }

  .header_item {
    padding: 28rpx 20rpx;
    padding-left: 38rpx;
  }

  .header_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4rpx;
    position: relative;
    z-index: 300;

    .header_top_left {
      font-size: 42rpx;
      color: #333;
      font-weight: bold;
      width: 540rpx;
    }
  }

  .header_bottom {
    font-size: 24rpx;
    color: #666;
    position: relative;
    z-index: 100;
    margin-top: 10rpx;
  }

  .header_bottomTops {
    text:nth-child(1) {
      padding-right: 10rpx;
      border-right: 1rpx solid #ccc;
    }

    text:nth-child(2) {
      padding-left: 10rpx;
    }
  }
}

.statusArea {
  padding: 10rpx 20rpx;
  background: #ffffff;
  border-radius: 8rpx;
  display: flex;
  font-size: 26rpx;
  position: absolute;
  font-weight: 500;
  right: 0rpx;
  top: 10rpx;
  z-index: 120;

  image {
    width: 32rpx;
    height: 32rpx;
  }
}

.addressBox {
  width: 710rpx;
  margin: 0 auto;
  background: #fff;
  border-radius: 8rpx;
  font-size: 24rpx;
  padding: 20rpx 22rpx 16rpx 16rpx;
  font-size: 24rpx;
  color: #999;
  box-sizing: border-box;
  margin-bottom: 20rpx;
  position: relative;
  z-index: 9;
  display: flex;

  .top {
    display: flex;

    .name {
      display: flex;
      // padding-left: 14rpx;
      font-weight: 600;
      color: #333;
      align-items: center;
    }

    image {
      width: 32rpx;
      height: 32rpx;
    }
  }

  .buildAddressBox {
    display: flex;
  }

  .buildAddress {
    padding: 6rpx 20rpx 0 32rpx;
    margin-left: 10rpx;
    width: 388rpx;
    margin-right: 30rpx;

    .buildings {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 388rpx;
      font-size: 20rpx;
      color: #666;
    }
  }

  .addressBox_right {
    display: flex;
    flex: 1;
    justify-content: flex-end;

    align-items: center;
  }

  .gpsAndCall {
    position: relative;
    display: flex;
    align-items: center;
    width: 190rpx;

    .gpsAndCall_item {
      display: flex;
      flex: 1;
      color: #666;
    }

    .guide {
      justify-content: flex-end;
    }

    image {
      width: 32rpx;
      height: 32rpx;
    }

    .line {
      width: 2rpx;
      height: 24rpx;
      background: #e9e9e9;
      position: absolute;
      left: 50%;
      top: 6rpx;
    }
  }
}

.headers {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  &-bg {
    width: 750rpx;
    height: 354rpx;
    padding-top: 40rpx;
    // background: linear-gradient(0deg, #deedf8, #deedf8);
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    // box-shadow: 5px 10px 15px #e3eff8;
    position: absolute;
    top: 0;
  }

  .stepContent {
    margin: 0 20rpx;

    .stepItme {
      background-color: #fff;
      border-radius: 8rpx;
      padding-top: 32rpx;

      &-title {
        height: 88rpx;
        font-size: 32rpx;
        font-weight: bold;
        text-align: left;
        color: #333333;
        line-height: 88rpx;
        padding: 0 20rpx;
        border-bottom: 2rpx solid #e9e9e9;
      }
    }

    .steps {
      padding: 0 20rpx;
      z-index: 9;
      // margin: 30rpx 0;
      margin-bottom: 0;
      background: #fff;
      border-radius: 8rpx;
      // width: 710rpx;
      box-sizing: border-box;
    }

    .userListBox {
      padding: 0 20rpx;
      padding-bottom: 20rpx;
    }
  }

  .progressBar_elevator {
    width: 710rpx;
    margin: 0 auto;
    background: #fff;
    border-radius: 8rpx;
    margin-bottom: 20rpx;
    margin-top: 15rpx;
    display: flex;
    height: 84rpx;
    line-height: 84rpx;
    z-index: 300;

    view:nth-of-type(1) {
      flex: 1;
      font-size: 32rpx;
      font-weight: 700;
      color: #333333;
      margin-left: 20rpx;
    }

    view:nth-of-type(2) {
      flex: 0 0 200rpx;
      text-align: right;
      font-size: 26rpx;
      color: #0091ff;
      border-radius: 8rpx;
      padding: 0rpx 30rpx;
      vertical-align: middle;

      text {
        margin-right: 8rpx;
      }

      image {
        width: 32rpx;
        height: 32rpx;
        vertical-align: middle;
      }
    }
  }

  .progressBar_planTime {
    width: 710rpx;
    margin: 0 auto;
    background: #fff;
    border-radius: 8rpx;
    margin-bottom: 16rpx;
    display: flex;
    height: 84rpx;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    box-sizing: border-box;

    .planTime_tit {
      display: flex;
      align-items: center;

      view:nth-of-type(1) {
        flex: 1;
        font-size: 26rpx;
        font-weight: 400;
        color: #666;

        .planBar {
          font-size: 24rpx;
          font-weight: 400;
          color: #e02020;
          background: #ffe3e3;
          padding: 0 10rpx;
          margin-left: 5rpx;
          border-radius: 4rpx;
        }
      }

      view:nth-of-type(2) {
        flex: 1;
        font-size: 26rpx;
        font-weight: 400;
        color: #999;
        text-align: right;
        margin-right: 20rpx;

        text:nth-of-type(2) {
          display: inline-block;
          width: 12rpx;
          height: 12rpx;
          border-right: 2rpx #999 solid;
          border-top: 2rpx #999 solid;
          transform: rotate(45deg);
          margin-bottom: 3rpx;
        }
      }
    }

    .planTime_date {
      display: flex;

      view:nth-of-type(1) {
        flex: 1;
        font-size: 32rpx;
        font-weight: 700;
        color: #333333;
        margin-left: 20rpx;

        text {
          font-size: 24rpx;
          font-weight: 400;
          color: #0091ff;
          vertical-align: middle;
        }

        image {
          width: 32rpx;
          height: 32rpx;
          vertical-align: middle;
          margin-left: 8rpx;
        }
      }

      view:nth-of-type(2) {
        flex: 1;
        font-size: 26rpx;
        font-weight: 400;
        color: #999;
        text-align: right;
        margin-right: 20rpx;
        image {
          width: 28rpx;
          height: 28rpx;
          vertical-align: middle;
          margin-bottom: 7rpx;
        }
      }
    }
  }

  .mark {
    z-index: 9;
    background: linear-gradient(0deg,
        rgba(243, 246, 248, 1),
        rgba(243, 246, 248, 0));
  }

  &-info {
    .header_item {
      display: flex;
      justify-content: space-between;
    }

    .toInfo {
      position: relative;
      z-index: 100;
    }

    margin: 0rpx 40rpx;
    z-index: 9;
    position: relative;
    padding: 20rpx 0;
    padding-top: 40rpx;

    // background-color: linear-gradient(0deg,rgba(226, 239, 248, 0.931), rgba(226, 239, 248, 0.931));
    &-name {
      font-size: 42rpx;
      color: #333;
      font-weight: bold;
      width: 560rpx;
      display: flex;
      flex-wrap: wrap;
    }

    &-tag {
      font-size: 24rpx;
      color: #999;
      padding-top: 7rpx;
    }

    .next-btn {

      // position: absolute;
      // bottom: 30rpx;
      // right: 0;
      // z-index: 99;
      image {
        width: 32rpx;
        height: 32rpx;
      }
    }

    .top_R {
      position: absolute;
      top: 50rpx;
      right: 0;
      z-index: 99;
      display: flex;
      align-items: center;

      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}

.allcheck {
  width: 154rpx;
  height: 48rpx;
  padding-right: 8rpx;
  font-size: 24rpx;
  border: 2rpx solid #e9e9e9;
  color: #333;
  transition: 0.3s all;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  font-weight: normal;

  image {
    width: 32rpx;
    height: 32rpx;
    padding-right: 3rpx;
  }
}

.allcheckAct {
  border: 2rpx solid #6bc013;
  color: #6bc013;
}

.card {
  width: calc(100% - 40rpx);
  background-color: #fff;
  // min-height: 1100rpx;
  border-radius: 8rpx;
  margin: 20rpx auto;
  position: relative;

  .title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: left;
    color: #333333;
    padding: 28rpx 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .sticky {
    // position: sticky !important;

    // width: 750rpx !important;
    background-color: #fff;
    z-index: 555;
    left: 0rpx;
    width: 100%;
  }

  .temp-list {
    width: 100%;
    margin-top: 20rpx;

    &-name {
      border-left: 5rpx solid #0091ff;
      padding-left: 16rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .sign-item {
    width: calc(100% - 40rpx);
    padding: 20rpx;

    &-name {
      font-size: 28rpx;
      color: #333;
      font-weight: 600;
      padding-bottom: 20rpx;
      position: relative;
    }

    &-line {
      width: 4rpx;
      height: 28rpx;
      background: #0091ff;
      top: 4rpx;
      left: -20rpx;
      position: absolute;
    }
  }
}

.signCard {
  background-color: #f3f6f8;

  .card_item {
    background-color: #fff;
    border-radius: 8rpx;
    margin-bottom: 16rpx;
  }
}

.scoreCard {
  width: calc(100% - 40rpx);
  background-color: #fff;
  // min-height: 1100rpx;
  border-radius: 8rpx;
  margin: 20rpx auto;

  .scoreContent {
    padding: 0 20rpx;

    // padding-bottom: 20rpx;
    .scoreContent_item {
      display: flex;
      padding-bottom: 28rpx;
      color: #333;

      .scoreLabel {
        color: #999;
        margin-right: 24rpx;
        width: 120rpx;
      }

      :nth-child(2) {
        display: flex;
        flex: 1;
        flex-wrap: wrap;
      }
    }
  }
}

.footer-block {
  width: 100%;
  height: 200rpx;
}

.canvas {
  margin: 20rpx auto;
  border-radius: 4rpx;
  overflow: hidden;
}

.sign-btns {
  display: flex;
  justify-content: flex-end;
  padding: 30rpx 20rpx;

  &-item {
    padding: 0 20rpx;
    height: 60rpx;
    background: #0091ff;
    border-radius: 4rpx;
    text-align: center;
    line-height: 60rpx;
    font-size: 26rpx;
    color: #666666;
    border: 2rpx solid #cccccc;
    background-color: #fff;
    margin-left: 30rpx;
  }

  &-item:last-child {
    color: #ffffff;
    margin-left: 20rpx;
    border: 2rpx solid #0091ff;
    background-color: #0091ff;
  }
}

.footer {
  width: 94%;
  height: 98rpx;
  padding: 5rpx 3%;
  background: #ffffff;
  position: fixed;
  z-index: 99;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 2rpx solid #eee;

  &-item {
    width: 100rpx;
    text-align: center;
    line-height: 25rpx;
    color: #666;
    font-size: 26rpx !important;

    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .btn {
    flex: 1;
    height: 70rpx;
    background: #0091ff;
    border-radius: 8rpx;
    text-align: center;
    font-size: 28rpx !important;
    line-height: 70rpx;
    color: #fff;
    // margin-left: 20rpx;
  }

  .repair {
    background: #f5fbff;
    border-radius: 8rpx 0rpx 0rpx 8rpx;
    color: #0091ff;
  }

  .disabled {
    background-color: #ccc;
  }
}

.change_elevator {
  display: flex;
  flex-direction: row;
  justify-content: center;

  .actElevator {
    // background-color: #0091ff;
    font-size: 24rpx !important;
    color: #0091ff !important;
    border: 2rpx #0091ff solid !important;
  }

  view:nth-of-type(1) {
    // background-color: #0091ff;
    color: #666;
    height: 72rpx;
    width: 176rpx;
    line-height: 72rpx;
    text-align: center;
    border-radius: 8rpx;
    border: 2rpx #ccc solid;
    font-size: 28rpx;
    margin-right: 32rpx;
  }

  view:nth-of-type(2) {
    color: #666;
    height: 72rpx;
    width: 176rpx;
    line-height: 72rpx;
    text-align: center;
    border-radius: 8rpx;
    border: 2rpx #ccc solid;
    font-size: 28rpx;
  }
}

.special_tit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .tit_up {
    font-size: 28rpx;
    font-weight: 500;
    color: #000000;
    margin-bottom: 20rpx;
    width: 360rpx;
    text-indent: -40rpx;
    margin-left: 40rpx;
  }

  .tit_dwn {
    font-size: 24rpx;
    text-align: center;
    color: #666666;
  }
}
</style>
